<template>
  <div class="article-container">
    <van-nav-bar
      class="app-nav-bar"
      title="文章详情"
      left-arrow
      @click-left="$router.back()"
    />
    <div class="article-wrap">
        <h1 class="title">{{ article.title }}</h1>
        <van-cell center class="user-info">
            <div slot="title" class="name">{{ article.aut_name }}</div>
            <van-image
                slot="icon"
                class="avatar"
                fit="cover"
                round
                :src="article.aut_photo"
            />
            <div slot="label" class="pubdate">{{ article.pubdate | relativeTime}}</div>
            <van-button
                :type="article.is_followed ? 'default' : 'info'"
                class="follow-btn"
                size="small"
                :icon="article.is_followed ? '' : 'plus'"
                round
                :loading="isFollowLoading"
                @click="onFollow"
            >{{ article.is_followed ? '已关注' : '关注'}}</van-button>
        </van-cell>
        <div 
            class="markdown-body"
            v-html="article.content"
            ref="article-content"
        >
        </div>
        <comment-list 
            :source="articleId" 
            :list="commentList" 
            @update-total-count="totalCommentCount = $event"
            @reply-click="onReplyClick"
        />
    </div>
    

    <div class="ariticle-bottom">
        <van-button
            class="coment-btn"
            type="default"
            round
            size="small"
            @click="isPostShow = true"
        >
            写评论
        </van-button>
        <van-icon
            name="comment-o"
            :info="totalCommentCount"
            color="#777"
        />
        <van-icon
            :color="article.is_collected ? 'orange' : '#777'"
            :name="article.is_collected ? 'star' : 'star-o'"
            @click="onCollect"
        />
        <van-icon
            :color="article.attitude === 1 ? 'hotpink' : '#777'"
            :name="article.attitude === 1 ? 'good-job' : 'good-job-o'"
            @click="onLike"
        />
      <van-icon name="share" color="#777777"></van-icon>
    </div>

    <!-- 发布评论 -->
    <van-popup 
        v-model="isPostShow" 
        position="bottom" 
    >
        <post-comment 
            :target="articleId"
            @post-success="onPostSuccess"
        />
    </van-popup>

    <van-popup 
        v-model="isReplyShow" 
        position="bottom"  
    >
        <comment-reply 
            v-if="isReplyShow"
            :comment="replyComment"
            :articleId="articleId"
            @close="isReplyShow = false"
        />
    </van-popup>
  </div>
</template>

<script>
import './github-markdown.css'
import {    getArticleById, 
            addCollect, deleteCollect,
            addLike, deleteLike } from '@/api/article'
import { ImagePreview } from 'vant'
import { addFollow, deleteFollow } from '@/api/user'
import CommentList from './components/comment-list'
import PostComment from './components/post-comment'
import CommentReply from './components/comment-reply'

export default {
  name: 'ArticleIndex',
  components: {
      CommentList,
      PostComment,
      CommentReply
  },
  // 在组件获取动态路由参数
//  方式一：this.$route.params.articleId
//  方式二： props 传参 ， 推荐
//  this.article.id
  props: {
      articleId: {
          type: [Number, String, Object],
          require: true
      }
  },
  data() {
    return {
        article: {},  // 文章详情
        isFollowLoading: false, // 关注用户的加载状态
        isPostShow: false, // 写评论的弹出层
        commentList: [], // 存储评论数据列表
        totalCommentCount: 0, // 评论总数
        isReplyShow: false,  // 评论回复的弹出状态
        replyComment: {} // 当前回复评论对象
    };
  },
  computed: {},
  watch: {},
  created() {
      this.loadArticle()
  },
  mounted() {},
  methods: {
      async loadArticle() {
          const { data } = await getArticleById(this.articleId)
          this.article = data.data

          // 数据改变影响视图更新（DOM数据）不是立即的
          // 所以如果需要在修改数据之后马上操作被该数据影响的视图DOM，需要把这个代码放到 $nextTick 中
          // 得到所有的 img 标签
          // this.$nextTick 是Vue提供的一个方法
          // 参考文档
          this.$nextTick(() => {
             this.handlePerviewImage()
          })
      },

      handlePerviewImage() {
           // 获取文章内容的容器
          const articleContent = this.$refs['article-content']

          // 得到所有的 img 标签
          const imgs = articleContent.querySelectorAll('img')

          const imgPaths = [] // 手机所有的图片路径

          // 循环 img 列表，给 img 注册点击事件
          imgs.forEach((img, index) => {
              imgPaths.push(img.src)
              img.onclick = function() {
                  ImagePreview({
                      images: imgPaths,
                      startPosition: index
                  })
              }
          });
      },

      async onFollow() {
          this.isFollowLoading = true
          if(this.article.is_followed) {
            // 已关注，取消关注
            await deleteFollow(this.article.aut_id)  
          } else {
            // 没有关注，添加关注
            await addFollow(this.article.aut_id) 
          }
          this.article.is_followed = !this.article.is_followed
          this.isFollowLoading = false
      },

      async onCollect() {
          this.$toast.loading({
              message: '操作中...',
              forbidClick: true  // 禁止背景点击
          })
          if(this.article.is_collected) {
            // 已收藏，取消收藏
            await deleteCollect(this.articleId)  
          } else {
            // 没有收藏，添加收藏
            await addCollect(this.articleId) 
          }
          this.article.is_collected = !this.article.is_collected
          this.$toast.success(`${this.article.is_collected ? '' : '取消'}收藏成功`)
      },

      async onLike() {
          this.$toast.loading({
              message: '操作中...',
              forbidClick: true  // 禁止背景点击
          })
          if(this.article.attitude === 1) {
            // 已点赞，取消点赞
            await deleteLike(this.articleId)
            this.article.attitude = -1 
          } else {
            // 没有点赞，添加点赞
            await addLike(this.articleId) 
            this.article.attitude = 1
          }
          this.$toast.success(`${this.article.attitude === 1 ? '' : '取消'}点赞成功`)
      },

      onPostSuccess(comment) {
          this.commentList.unshift(comment)
          this.totalCommentCount++
          this.isPostShow = false
      },

      onReplyClick(comment) {
          console.log(comment);
        this.replyComment = comment
          this.isReplyShow = true
      }
  }
};
</script>
<style lang="less" scoped>
.article-container {
    .app-nav-bar {
        position: fixed;
        top: 0;
        width: 100%;
        height: 46px;
        border-bottom: 1px solid #d8d8d8;
    }
    .title {
        // padding-top: 56px !important;
        font-size: 20px;
        color: #3a3a3a;
        padding: 14px;
        background-color: #fff;
        margin: 0;
    }

    .article-wrap {
        position: fixed;
        left: 0;
        right: 0;
        top: 46px;
        bottom: 44px;
        overflow-y: auto;
    }
    .user-info { 
        .avatar {
            width: 35px;
            height: 35px;
            margin-right: 8px;
        }
        .name {
            font-size: 12px;
            color: #333;
        }
        .pubdate {
            font-size: 11px;
            color: #b4b4b4;
        }
        .follow-btn {
            width: 85px;
            height: 29px;
        }
    }
    .markdown-body {
        // position: fixed;
        // left: 0;
        // right: 0;
        // top: 54px;
        // bottom: 0;
        overflow-y: auto; 
        padding: 12px;
        background-color: white;
    }

     .ariticle-bottom {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        justify-content: space-around;
        align-items: center;
        box-sizing: border-box;
        height: 44px;
        border-top: 1px solid #d8d8d8;
        background-color: #fff;
        /deep/ .van-button {
            width: 141px !important;
            // height: 23px;
            // border: 1px solid #eeeeee;
            // font-size: 15px;
            // line-height: 23px;
            color: #a7a7a7;
        }
        // .comment-btn {
        //     width: 141px !important;
        //     height: 23px;
        //     border: 1px solid #eeeeee;
        //     font-size: 15px;
        //     line-height: 23px;
        //     color: #a7a7a7;
        // }
        .van-icon {
            font-size: 20px;
        .van-info {
            font-size: 11px;
            background-color: #e22829;
            }
        }
    }
}
</style>